<template>
    <div class="TemperatureSection">
        <!-- 1. {{ props.isTimerActive }} -->
        <div class="ChartContainer" ref="temperatureChart"></div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { ref, onMounted, onUnmounted, inject } from 'vue';
// import { getNowData } from '@/api/Environment/index.js';

// 接收父组件传递过来的 isTimerActive 属性
const props = defineProps({
    title: {
        type: String,
        default: '温度实时显示'
    },
    isTimerActive: {
        type: Boolean,

    },
    
});
const temperatureChart = ref(null);
const temperatureData = ref([]);
const lastData = ref(null); // 用于存储最后一条数据
const timer = ref(null);

onMounted(async () => {
    await fetchDataAndUpdateChart();
    if (props.isTimerActive) {
        timer.value = setInterval(fetchDataAndUpdateChart, 3000);
    } else {
        console.log('温度图表定时器已启动');
        clearInterval(timer.value);
    }

});

onUnmounted(() => {
    console.log('温度图表销毁');

    if (timer.value) {
        clearInterval(timer.value);
    }
});

// async function fetchDataAndUpdateChart() {
//     const res = await getNowData('');
//     if (res.code == 201) {
//         const newData = res.data.temp[0];
//         if (!lastData.value || lastData.value.time !== newData.time) {
//             // 如果有新数据或者数据时间戳改变了，更新图表
//             temperatureData.value.push(newData);
//             if (temperatureData.value.length > 7) {
//                 temperatureData.value.shift(); // 移除最旧的数据
//             }
//             lastData.value = newData; // 更新最后一条数据
//             initChart();
//         } else {
//             // 如果没有新数据，清除定时器
//             clearInterval(timer.value);
//             timer.value = null;
//         }
//     }
// }

function fetchDataAndUpdateChart() {
    // 生成一个随机的时间戳和温度值
    const currentTime = new Date().getTime();
    let fakeTemperature = Math.floor(Math.random() * 30) + 10; // 假设温度在10到40之间

    // 确保温度值在22到24之间
    fakeTemperature = Math.max(22, Math.min(24, fakeTemperature));

    // 创建一个新数据对象
    const newData = {
        time: currentTime,
        value: fakeTemperature
    };

    // 检查是否有新数据或者数据时间戳改变了
    if (!lastData.value || lastData.value.time !== newData.time) {
        temperatureData.value.push(newData);
        if (temperatureData.value.length > 7) {
            temperatureData.value.shift(); // 移除最旧的数据
        }
        lastData.value = newData; // 更新最后一条数据
        initChart();
    }
}

function initChart() {
    if (!temperatureChart.value) return;

    const myChart = echarts.init(temperatureChart.value);
    const option = {
        title: {
            text: props.title,
            left: 'left'
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            // data: temperatureData.value.map(item => item.time),
            data: temperatureData.value.map(item => {
                const date = new Date(item.time);
                // 格式化时间为时分秒
                return `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
            }),
            axisLabel: {
                color: '#333'
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                color: '#333'
            }
        },
        series: [
            {
                data: temperatureData.value.map(item => item.value),
                type: 'line',
                itemStyle: {
                    color: '#409EFF'
                }
            }
        ]
    };
    myChart.setOption(option);
}
</script>


<style lang="scss" scoped>
.TemperatureSection {
    // 设置该温度相关区域的宽度为父容器宽度的50%，可根据实际页面布局需求灵活调整该宽度占比
    width: 50%;
    height: 400px;
    // 使用flex布局，并设置为垂直方向排列子元素（按列排列）
    display: flex;
    // flex-direction: column;
    // justify-content: flex-end;
    // align-items: center;
    // background-color: aqua;
    // border: 1px solid gray;

    .ChartContainer {
        // 设置图表容器的宽度为700px
        width: 100%;
        // 设置图表容器的高度为250px
        height: 300px;
        // 设置背景颜色为白色
        background-color: white;
    }
}
</style>